<template>
    <div class="main coupon-list">
        <section>
            <div v-if="rightsButtons['add']" class="btn-block">
                <router-link :to="{name: 'groupBookingAdd'}">
                    <el-button type="success" size="small" icon="el-icon-circle-plus" plain>新建拼团活动</el-button>
                </router-link>
            </div>
            <!--<el-form ref="searchForm" class="search-block" :model="listQuery" label-position="right" label-width="96px">-->
                <!--<el-row :gutter="50">-->
                    <!--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">-->
                        <!--<el-form-item label="状态：" prop="groupBuyStatus">-->
                            <!--<el-select v-model="listQuery.status" clearable @change="search">-->
                                <!--<el-option v-for="(value, key) in activityStateData" :key="key" :label="value" :value="key"></el-option>-->
                            <!--</el-select>-->
                        <!--</el-form-item>-->
                    <!--</el-col>-->
                <!--</el-row>-->
                <!--&lt;!&ndash; <el-form-item label="" class="btn-item">-->
                    <!--<el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>-->
                    <!--<span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>-->
                <!--</el-form-item> &ndash;&gt;-->
            <!--</el-form>-->
            <!--<el-row>-->
              <!--<el-button v-for="(value, key) in activityStateData" :key="key" :type="{primary: key===listQuery.status}" @click="search(key)">{{value}}</el-button>-->
            <!--</el-row>-->
            <el-radio-group style="margin-bottom: 30px;" v-model="listQuery.status" @change="search">
              <el-radio-button :label="key" v-for="(value, key) in activityStateData" :key="key">{{value}}</el-radio-button>
            </el-radio-group>
            <search-form :listQuery="listQuery" :queryConfig="queryConfig" :labelWidth="100" :search="search"/>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="活动名称" prop="promotionName" width="170"></el-table-column>
                <el-table-column align="center" label="有效时间" width="320" prop="groupTime">
                  <template slot-scope="scope">
                    {{scope.row.startTime}} 至 {{scope.row.endTime}}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="活动状态" width="80">
                    <template slot-scope="scope">
                      <!-- {{scope.row.groupBuyStatus === 1 ? '生效中' : '已失效'}} -->
                       {{activityStateData[scope.row.status]}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="订单实付金额" prop="succeedPriceTotalAmount">
                  <template slot-scope="scope">
                       {{scope.row.succeedPriceTotalAmount || 0}}
                    </template>
                </el-table-column>
                <!-- <el-table-column align="center" label="成团订单数" prop="alreadyGroupGoodsNum"></el-table-column> -->
                <el-table-column align="center" label="成团人数" prop="succeedUserNumber"></el-table-column>
                <el-table-column align="center" label="操作" width="230" v-if="rightsButtons['edit']">
                    <template slot-scope="scope">
                        <el-button type="text" v-if="scope.row.status !== 4" @click="$router.push({ name: 'groupBookingEdit', params: { type: 'edit', id: scope.row.id } })">编辑</el-button>
                        <el-button type="text" v-if="scope.row.status*1 < 3" @click='forbidThis(scope.row)'>使失效</el-button>
                        <!--<el-button type="text" v-if="scope.row.activeState===1||2" @click="$router.push({ name: 'groupBookingView', params: { type: 'view', id: scope.row.couponActivityId } })">查看</el-button>-->
                        <!--<el-button type="text" v-if="scope.row.activeState===2">删除</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageIndex"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
        </section>
    </div>
</template>
<script>
    import searchForm from '@/components/searchForm/index'
    export default {
      name: 'groupBooking',
      components: {
        searchForm
      },
      data(){
        return {
          activityStateData: {
            0: '所有',
            1: '未开始',
            2: '进行中',
            3: '已结束',
            4: '已失效'
          },
          listLoading: false,
          listQuery: {
            activityName: '',
            status: 0,
            pageIndex: 1,
            pageSize: 10
          },
          queryConfig: [
            {
              prop: 'activityName',
              type: 'input',
              label: '活动名称'
            }
          ],
          list: [],
          listTotal: 0
        }
      },
      created(){
        this.getList();
      },
      methods: {
        // 获取列表
        getList () {
          this.listLoading = true;
          this.request({
            url: '/gb-manage/groupbuying/list',
            method: 'get',
            params: this.listQuery
          }).then(({data, totalCount}) => {
            this.list = data;
            this.listTotal = totalCount;
            this.listLoading = false;
          }).catch(err => {
            console.log(err);
            this.list = [];
            this.listTotal = 0;
            this.listLoading = false;
          });
        },
        // 清空搜索条件
        resetForm (formName) {
          this.$nextTick(() => {
            this.$refs[formName].resetFields()
          })
        },
        // 搜索
        search(key) {
          this.listQuery.pageIndex = 1
          this.getList();
        },
        //切换每页条数
        handleSizeChange (value) {
          this.listQuery.pageSize = value;
          this.getList()
        },
        // 切换分页
        handleCurrentChange(page) {
          this.listQuery.pageIndex = page;
          this.getList();
        },
        // 使活动失效
        forbidThis(item) {
          this.$confirm('操作将使活动立即结束, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.request({
              url: '/gb-manage/groupbuying/cancel/'+item.id,
              method: 'put'
            }).then(res => {
              item.status = 4
              this.$message({
                type: 'success',
                message: res.msg || res.message
              })
              this.listLoading = false;
            }).catch(err => {
              console.log(err);
              this.listLoading = false;
            });
          }).catch(() => {
            console.log('cancle')
          });
        },

        // 操作优惠券
        operate(couponActivityId, type) {
          let warnMsg = type === 'disable' ? '作废后将会使已领取的券变为失效，可能遭到用户投诉，确认还要作废吗？' : `${this.operateTypeData[type]}该优惠券, 是否继续?`;
          this.$confirm(warnMsg, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.request({
              url: `/coupon/system/activity/${type}`,
              method: 'post',
              data: { couponActivityId }
            }).then(({data}) => {
              this.$message.success(`优惠券活动已成功${this.operateTypeData[type]}`)
              this.getList()
            }).catch(err => {
              console.log(err);
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });
          });
        }
      }
    }
</script>
<style lang="scss">
    @import "../../../styles/mixin";
    .use-range-block{
        @include flex;
        text-align: left;

        div{
            @include sub-item;
        }
    }
</style>
